<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频播放页</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div th:replace="header"></div>
<div id="course">
  <!--创建视频播放窗口-->
  <center><video id="screen" width="80%" controls>
    <source id="player" th:data-video="${video}" th:data-vid="${video.id}" th:data-uid="${session.user.id}" th:data-courseId="${course.id}" th:src="${video.source}" type="video/mp4">
  </video></center>
  <!--课程大纲列表-->

    <li style="margin-left: 10%">
      <!--课程标题-->
      <h1 th:text="${course.courseName}">欧洲简史</h1>
    </li>
    <!--水平线-->
    <hr />
  <div class="panel-group" style="width: 80%;margin-left: 10%">
    <div class="panel panel-default" th:each="catalog : ${catalogList}" th:if="${catalog.vlist != null && catalog.vlist.size() > 0}">
      <div class="panel-heading">
        <h4 class="panel-title">
          <span href="#" th:text="${catalog.catalogName}">
          </span>
        </h4>
      </div>
      <div class="panel">
        <div class="panel-body" th:each="video : ${catalog.vlist}">
          <span th:text="${video.videoName}" class="video" th:data-source="${video.source}" th:data-vid="${video.id}" th:data-video="${video}"></span>
          <div style="float: right;color: green;display: inline" th:data-uid="${session.user.id}" th:data-vid="${video.id}" th:data-courseId="${course.id}" class="progress_state"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.onload = function (){
      $(".progress_state").click();
    }
    //记录视频学习进度
    $(".progress_state").click(function (){
      var $this = $(this);
      var uid =  $(this).attr("data-uid");
      var vid =  $(this).attr("data-vid");
      var courseId =  $(this).attr("data-courseId");
      // console.log(uid);
      // console.log(vid);
      // console.log(courseId);
      $.ajax({
        type:"get",
        url:"/queryProgress",
        async:false,
        data:{
          "uid": uid,
          "vid": vid,
          "courseId": courseId
        },
        success:function(data){
          console.log(data);
          if(data == "已完成"){
            $this.html(data);
          }
        }
      })
    })
    //切换视频
    $(".video").click(function (){
      var video = $(this).attr("data-video");
      var source =  $(this).attr("data-source");
      var vid = $(this).attr("data-vid")
      $("#player").attr("data-video", video);
      $("#player").attr("data-vid", vid);
      $("#player").attr("src", source);
      $("#screen").load();
    });

    $(".video").mouseenter(function (){
      $(this).css("color", "blue");
    });
    $(".video").mouseleave(function (){
      $(this).css("color", "black");
    });

    //视频播放结束记录进度
    var video = document.getElementById("screen");
    video.addEventListener('ended', function(){
      var uid =  $("#player").attr("data-uid");
      var vid =  $("#player").attr("data-vid");
      var courseId =  $("#player").attr("data-courseId");
      $.ajax({
        type:"put",
        url:"/updateProgress",
        async:false,
        data:{
          "uid": uid,
          "vid": vid,
          "courseId": courseId
        },
        success:function(data){
          if(data == "修改学习状态成功"){
            alert("播放结束，已记录");
            window.location.reload();
          }
        }
      })
    }, false);

  </script>


</div>
</body>
</html>